{% extends 'base.html' %}

{#广告#}
{% block guang %}
    <div id="demo" class="carousel slide" align="center" data-ride="carousel">
        <!-- 指示符 -->
        <ul class="carousel-indicators">
            <li data-target="#demo" data-slide-to="0" class="active"></li>
            <li data-target="#demo" data-slide-to="1"></li>
            <li data-target="#demo" data-slide-to="2"></li>
        </ul>
        <!-- 轮播图片 -->

        <a href="/guang/">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="/static/img/广告1.webp" width="800px" height="400px">
                </div>
                <div class="carousel-item">
                    <img src="/static/img/广告2.webp" width="800px" height="400px">
                </div>
                <div class="carousel-item">
                    <img src="/static/img/广告3.webp" width="800px" height="400px">
                </div>
            </div>
        </a>

        <!-- 左右切换按钮 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
{% endblock %}

{% block content %}
    <div class="col-md-9 cl-left">
        {% for article in articles %}
            <div class="cl-card">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image"><a
                            href="{% url 'home:details' %}?id={{ article.id }}"><img
                            src="{{ article.avatar.url }}" class="img-fluid" alt=""></a></div>
                    <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
                        <h4>
                            <b><a href="{% url 'home:details' %}?id={{ article.id }}"
                                  style="color: black;">{{ article.title }}</a></b>
                        </h4>
                        <p class="cl-card-main-info">
                            {{ article.sumary }}
                        </p>
                        <div style="color: #3E87E3"><span>{{ article.total_views }}</span>人浏览 /
                            <span>{{ article.comments_count }}</span>人评论
                        </div>
                        <p class="cl-card-more"><a href="">阅读更多...</a></p>
                    </div>
                </div>
            </div>
        {% endfor %}

        <nav aria-label="Page navigation example">
            <ul class="pagination justify-content-center">
                {# has_previous True如果有上一页，则返回#}
                {% if articles.has_previous %}
                    <li class="page-item">
                        <a class="page-link"
                           href="?cat_id={{ cat_id }}&page_index={{ articles.previous_page_number }}"
                           aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                            <span class="sr-only">上一页</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Previous">
                            <span aria-hidden="true">上一页</span>
                            <span class="sr-only">上一页</span>
                        </a>
                    </li>
                {% endif %}
                {#  articles.paginator.page_range  返回当前数据的 页码迭代器。 #}
                {% for num in articles.paginator.page_range %}
                    {% if num %}
                        {% ifequal num articles.number %}
                            <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
                        {% else %}
                            <li class="page-item"><a class="page-link"
                                                     href="?cat_id={{ cat_id }}&page_index={{ num }}">{{ num }}</a>
                            </li>
                        {% endifequal %}
                    {% else %}
                        <li class="disabled"><a href="#">...</a></li>
                    {% endif %}
                {% endfor %}
                {# has_next True如果有下一页则返回#}
                {% if articles.has_next %}
                    <li class="page-item">
                        <a class="page-link"
                           href="?cat_id={{ cat_id }}&page_index={{ articles.next_page_number }}"
                           aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                            <span class="sr-only">下一页</span>
                        </a>
                    </li>
                {% else %}
                    <li class="page-item disabled">
                        <a class="page-link" href="#" aria-label="Next">
                            <span aria-hidden="true">下一页</span>
                            <span class="sr-only">下一页</span>
                        </a>
                    </li>
                {% endif %}
                <li class="page-item disabled">
                    <a href="#" class="page-link">共计：{{ articles.paginator.count }} 条</a>
                </li>
            </ul>
        </nav>
    </div>
{% endblock %}